<template>
  <a-layout class="container">
    <a-layout-sider
      v-model:collapsed="collapsed"
      :width="220"
      :trigger="null"
      :collapsed-width="52"
      class="left"
      collapsible>
      <div class="left_logo">
        <div :class="['logo_icon',{'collapsed':collapsed}]"/>
        <div :class="['logo_letter',{'collapsed':collapsed}]"/>
      </div>
      <div class="left_content">
        <slot name="menu"/>
      </div>
      <div
        class="left_collapsed"
        @click="toggleCollapsed">
        <MenuUnfoldOutlined v-if="collapsed" />
        <MenuFoldOutlined v-else/>
        <span
          class="collapsed_text"
          :class="{'collapsed':collapsed}">收起菜单</span>
      </div>
    </a-layout-sider>
    <a-layout>
      <slot name="content"/>
    </a-layout>
  </a-layout>
</template>
<script setup>
import { ref, defineEmits } from 'vue'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'

const collapsed = ref(false)
const emit = defineEmits(['collapsed'])
/** 折叠事件 */
const toggleCollapsed = () => {
  collapsed.value = !collapsed.value
  emit('collapsed', collapsed.value)
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
}
.left {
  color: white;
  height: 100%;
  background: #122443;
  animation: uncollapsed 0.5s;
  &.collapsed {
    width: 52px;
    animation: collapsed 0.5s;
  }
  .left_logo,
  .left_content,
  .left_collapsed {
    width: 100%;
    padding: 0 14px;
  }
  .left_logo {
    height: 64px;
    padding-top: 10px;
    border-bottom: solid 1px rgba(255, 255, 255, 0.8);
    overflow-x: hidden;
    position: relative;
    .logo_icon {
      position: absolute;
      width: 24px;
      height: 30px;
      background-image: url(../../assets/logo.png);
      left: 20px;
      top: 17px;
      transform: scale(1.5);
      animation: zoomOut 0.5s;
      &.collapsed {
        transform: scale(1);
        left: 14px;
        animation: zoomIn 0.5s;
      }
    }
    .logo_letter {
      width: 103px;
      height: 13px;
      background-image: url(../../assets/logo_letter.png);
      position: absolute;
      left: 60px;
      top: 25px;
      animation: show 0.5s;
      &.collapsed {
        opacity: 0;
        animation: hide 0.5s;
      }
    }
  }
  .left_content {
    height: calc(100% - 104px);
    padding: 0;
    overflow-y: auto;
  }
  .left_collapsed {
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    & > .collapsed_text {
      padding: 0 10px;
      opacity: 1;
      animation: show 0.5s;
    }
    & > .collapsed_text.collapsed {
      opacity: 0;
      animation: hide 0.5s;
    }
  }
}
@keyframes collapsed {
  0% {
    width: 256px;
  }
  100% {
    width: 52px;
  }
}
@keyframes uncollapsed {
  100% {
    width: 256px;
  }
  0% {
    width: 52px;
  }
}
@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(1.5);
    left: 20px;
  }
  100% {
    transform: scale(1);
    left: 14px;
  }
}
@keyframes zoomOut {
  100% {
    transform: scale(1.5);
    left: 20px;
  }
  0% {
    transform: scale(1);
    left: 14px;
  }
}
.right {
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
}
</style>
